<template>
  <div class="default-layout">
    <div class="default-layout-box">
      <div class="default-layout-box-header">
          <Header />
      </div>
      <div class="default-layout-box-main">
        <el-scrollbar class="default-layout-box-main-scrollbar">
          <slot />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import stores from '@/store';
const useBaseData = stores.useBaseDataStore();
onMounted(async () => {
 
});


</script>

<style scoped lang="scss">
.default-layout-box-main {
  background-color: var(--bg-color-page) !important;
}
.default-layout-box-header {
  background-color: var(--bg-color-overlay) !important;
  border-bottom: 1px solid var(--border-color);
}
.default-layout {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-color-page);

  &-aside {
    height: 100%;
    box-shadow: var(--box-shadow);
    position: relative;
    background-color: var(--bg-color-overlay);
  }

  &-box {
    height: 100vh;
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: auto;

    &-header {
      height: 48px;
    }

    &-main {
      width: 100%;
      height: calc(100vh - 48px);
    }
  }
}
</style>
